<template>
  <div class="infoBox">
    <titleTop :titleTxet="titleTxet"></titleTop>
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>头像</span>
      </div>

      <van-uploader :after-read="onRead">
        <div class="img_box">
          <img :src="info.src?info.src:require('../../../assets/img/jia.jpg')" alt="">
        </div>
      </van-uploader>
    </div>
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>昵称</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <input type="text" v-model="info.user_login" placeholder="注册后此昵称不可更改">
      </div>
    </div>


    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>出生年月</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span @click="show111()">{{info.birthday}}</span>
      </div>
    </div>
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>所在地</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span @click="show6()">{{info.location}}</span>
      </div>
    </div>
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>个性签名</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <input type="text" v-model="info.signature" placeholder="点击修改个性签名">
      </div>
    </div>


    <div class="sub-btn t_center font_36 c_ff">
      <span @click="achieve()">完成</span>
    </div>



    <van-popup v-model="show1" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="出生年月"
        :min-date="minDate"
        @confirm="onconfirm1($event)"
        @cancel="oncancel1"
      />
    </van-popup>

    <van-popup v-model="show5" position="bottom">
      <van-area :area-list="areaList" title="选择所在地" value="110101" @confirm="onconfirm5($event)" @cancel="oncancel5"/>
    </van-popup>
  </div>
</template>

<script>
  import {Dialog} from 'vant';
  import areaList from '../../../areaList'
  import titleTop from "../../com/title";
  import * as common from "../../../api/common.js";
  export default {
    components: { titleTop },
    data() {
      return {
        areaList:areaList,
        show1:false,
        currentDate: new Date(),
        minDate:new Date(1950,0,1),
        show5:false,
        titleTxet: {
          titleName: "完善信息",
          IsBool: true,
          IsShare: false
        },
        info: {
          user_login: "",
          birthday: "点击选择写您的出生年月日",
          location: "点击选择地点",
          signature: "",
          src:''
        }
      };
    },
    mounted(){
      mui.back = function() {
        window.history.go(-1);
      }
    },
    methods: {
      show111(){
        this.show1 = true;
      },
      onconfirm1(e){
        var date = new Date(e);
        this.info.birthday = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        this.show1 = false;
      },
      oncancel1(){
        this.show1 = false;
      },
      show6(){
        this.show5 = true;
      },
      onconfirm5(e){
        this.info.location = e[0].name+' '+e[1].name+' '+e[2].name;
        this.show5 = false;
      },
      oncancel5(){
        this.show5 = false;
      },
      onRead(file) {
        this.info.src = file.content;
      },
      achieve(){
        console.log(this.$store.state.user_id);
        if (this.info.src.length==0||this.info.user_login.length==0||this.info.birthday.length==0||this.info.location.length==0||this.info.signature.length==0){
          Dialog.alert({
            title: "不能提交",
            message: '请完善您的个人信息'
          });
        }else{
          let parms = {
            user_id:this.$store.state.user_id,
            avatar:this.info.src,
            user_login:this.info.user_login,
            birthday:this.info.birthday,
            location:this.info.location,
            signature:this.info.signature
          };
          common.addUserinfo(parms).then(res=>{
            console.log(res);
            if (res.status==200){
              Dialog.alert({
                message: res.msg
              });
              history.go(-2);
            }
          })
        }

      }
    }
  };
</script>

<style scoped>
  .infoBox>div{
    box-sizing: border-box;
  }
  .img_box {
    width: 86px;
    height: 86px;
    text-align: center;
    line-height: 86px;
  }
  .img_box img {
    width: 86px;
    height: 86px;
    border-radius: 10px;
  }
  .p_t {
    padding-top: 32px;
  }
  .p_d {
    padding-bottom: 32px;
  }
  .sub-btn {
    width: 400px;
    height: 80px;
    line-height: 80px;
    margin: 0 auto;
    background: #884ca4;
    border-radius: 10px;
    margin-top: 300px;
  }
  .sub-btn span{
    color: #fff;
  }
  .w2{
    width: 70%;
  }
  .w2 input{
    width: 100%;
    text-align: right;
  }
</style>
